<template>
	<view>
		<view class="menu" v-if="showMenu">
			<view class="mask" @click="cloceMenu"></view>
			<view class="m-ct">
				<view class="menu_item" @click.stop="forgetPwd">忘记密码</view>
				<view class="menu_item" @click.stop="out">退出登录</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	props: {
		showMenu:{
			type: Boolean,
			default:false
		}
	},
	methods: {
		cloceMenu(){
			let that = this
			that.showMenu = !that.showMenu
		},
		forgetPwd(){
			uni.navigateTo({
				url:'../forget-pwd/forget-pwd'
			})
		},
		out(){
			uni.clearStorageSync()
			uni.reLaunch({
				url:'../login/login'
			})
		},
	}
};
</script>

<style lang="less" scoped>
	.menu {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		.mask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0,0,0,.1);
		}
		.m-ct {
			position: absolute;
			top: 20upx;
			right: 30upx;
			width: 150upx;
			// top: 110upx;
			background-color: #FFFFFF;
			border-radius: 10upx;
			font-size: 30upx;
			box-shadow: 0 0 10upx darkgray;

			.menu_item {
				display: block;
				height: 70upx;
				line-height: 70upx;
				font-size: 24upx;
				color: #666666;
				// width: 200upx;
				text-align: center;
			}
		}
		.m-ct:before {
			content: '';
			display: block;
			width: 0;
			height: 0;
			border-width: 0 8*2upx 8*2upx;
			border-style: solid;
			border-color: transparent transparent #FFFFFF;
			position: absolute;
			top: -8*2upx;
			right: 30upx;
		}
	}
</style>
